<template>
	<div :id="chart_id" :class="className" style="height:100%;">

	</div>

</template>
<script>
  import echarts from 'echarts'
	export default {
		props: ['options','id','className'],
		data(){
			return{
				chart_id : '',
				myChart : null
			}
		},
		watch:{
	        options:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	                console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
	           		if(this.myChart){
	           			this.myChart.setOption(this.options)
	           		}
	            },
	            deep:true
	        }
	    },
		created:function(){
			if(this.id){
				this.chart_id = this.id
			} else {
				this.chart_id = parseInt(Math.random() * 100000) + '-chart'
			}

		},
		mounted: function(){
	      this.myChart = echarts.init(document.getElementById(this.chart_id));

	      this.myChart.setOption(this.options);
	    }
	}

</script>
<style>

</style>
